<!--
 * @Author: yuanming
 * @Date: 2023-12-07 18:52:33
 * @LastEditors: yuanming
 * @LastEditTime: 2024-09-20 13:27:07
 * @Description: fileDescription
-->
<template>
    <div v-if="currentIndex === 1">
        <div class="infoWindow">
            <div class="title">
                <div class="leftTitle">{{ info.parkName || '-' }}</div>
                <img src="@/assets/images/delete.png" class="rightImg" alt="" @click="$emit('clickMap')" />
            </div>
            <!-- <div class="title">{{ info.parkName || '-' }}</div> -->
            <div class="infoItem">
                <div>总泊位数：</div>
                <div>{{ info.capacityNum }}</div>
            </div>
            <div class="infoItem">
                <div>实时余位数：</div>
                <div>{{ info.capacityNum - info.freeNum < 0 ? 0 : info.capacityNum - info.freeNum }}</div>
            </div>
            <div class="infoItem">
                <div>备案负责人：</div>
                <div>{{ info.ownerName || '-' }}</div>
            </div>
            <div class="infoItem">
                <div>联系电话：</div>
                <div>{{ info.ownerMobile || '-' }}</div>
            </div>
        </div>
    </div>
    <div v-else-if="currentIndex === 2">
        <div class="infoWindow">
            <div class="infoWindow-title">
                <div class="leftTitle">{{ info.roadName || '-' }}</div>
                <img src="@/assets/images/delete.png" class="rightImg" alt="" @click="$emit('clickMap')" />
            </div>
            <template v-if="info.type === 3">
                <div class="tips">当前停放共享单车数量：{{ info.totalShareBikNum || 0 }}</div>
                <LineArea width="100%" height="25vh" :chartData="info.lineAreaData || {}" />
            </template>
            <template v-else>
                <div class="tips">非机动车泊位总面积㎡：{{ info.nonAutomobileArea || 0 }}</div>
                <div class="tips">市民占用总泊位面积㎡：{{ info.peopleArea || 0 }}</div>
                <div class="tips">泊位可用总面积㎡：{{ (info.nonAutomobileArea - info.peopleArea) || 0 }}</div>
                <div class="tips">重新划线日期：{{ info.lineDate ? formatTime(info.lineDate) : 0 }}</div>
            </template>
        </div>
    </div>
</template>

<script setup>
import moment from 'moment'
import LineArea from '@/charts/lineArea.vue'

const formatTime = (time) => moment(time, 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')

defineProps({
    currentIndex: {
        type: Number,
        default: 2,
    },
    info: {
        type: Object,
        default: () => {},
    },
})

</script>

<style lang="scss" scoped>
.closeIcon {
    color: white;
}
.infoWindow {
    width: 25vw;
    height: 39vh;
    background-image: url("@/assets/images/infoWindowBg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 300;
    padding: 1.8vh 2vw 4vh 2vw;
    box-sizing: border-box;
    .title {
        font-size: 1.2vw;
        color: #fff;
        margin-bottom: 2vh;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding-right: 0.5vw;
        box-sizing: border-box;
        .rightImg {
            width: 0.8vw;
            height: 0.8vw;
            cursor: pointer;
        }
    }
    .infoItem {
        width: 100%;
        height: 4vh;
        line-height: 4vh;
        display: flex;
        align-items: center;
        font-size: 1vw;
        color: #fff;
        margin-top: 1vh;
    }
    .infoItem div:nth-child(1) {
        color: #a2ddff;
    }
    .infoWindow-title {
        width: 100%;
        height: auto;
        font-size: 1.2vw;
        color: white;
        font-weight: bold;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding-right: 0.5vw;
        box-sizing: border-box;
        .leftTitle {
            width: 85%;
            height: 5vh;
            line-height: 5vh;
             /*1. 先强制一行内显示文本*/
            white-space: nowrap;
            /*2. 超出的部分隐藏*/
            overflow: hidden;
            /*3. 文字用省略号替代超出的部分*/
            text-overflow: ellipsis;
        }
        .rightImg {
            width: 0.8vw;
            height: 0.8vw;
            cursor: pointer;
        }
    }
    .tips {
        width: 100%;
        height: 4vh;
        line-height: 4vh;
        font-size: 0.8vw;
        color: #a2ddff;
        font-weight: 600;
        text-align: center;
    }
}
</style>
